<template>
    <div>
        <router-link to="/main/biao" style="position: absolute;top: 10px;left: 10px;">返回</router-link>
        <h1>员工住房申请表</h1>
        <table border="1">
            <thead>
                <tr>
                    <th colspan="2">申请人资料</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>姓 名 （必填）</td>
                    <td><input v-model="formData.name" type="text" required></td>
                </tr>
                <tr>
                    <td>工 号</td>
                    <td><input v-model="formData.employeeId" type="text"></td>
                </tr>
                <tr>
                    <td>性 别（必填）</td>
                    <td>
                        <input type="radio" v-model="formData.gender" value="男"> 男
                        <input type="radio" v-model="formData.gender" value="女"> 女
                    </td>
                </tr>
                <tr>
                    <td>部 门</td>
                    <td><input v-model="formData.department" type="text"></td>
                </tr>
                <tr>
                    <td>工 种（必填）</td>
                    <td><input v-model="formData.jobType" type="text" required></td>
                </tr>
                <tr>
                    <td>身份证号（必填）</td>
                    <td><input v-model="formData.idCard" type="text" required></td>
                </tr>
            </tbody>
        </table>
        <table border="1">
            <thead>
                <tr>
                    <th>管理费用</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="radio" v-model="formData.managementFee" value="40元/月"> 40元/月
                        <input type="radio" v-model="formData.managementFee" value="其它"> 其它
                    </td>
                </tr>
            </tbody>
        </table>
        <p>相关住宿说明：
            <br>1、凡新入职员工入职之时都须填写《员工住房申请表》，不在公司住宿人员或中途退宿人员须向部门提交《员工外宿申请单》及签订安全协议，部门核准后，外宿方为有效，否则无效。
            <br>2、入住后宿舍产生的水电费和维修费等日常费用由宿舍成员分摊（水费含冷水和热水费用），且以宿管办登记入住日期为核算起始日期。
        </p>
        <p>本人已认真阅读以上条款，同意按照公司要求执行住宿/退宿及外宿申请相关要求。</p>
        <p>住房申请人：<input v-model="formData.applicant" type="text">
            申请 日 期：<input v-model="formData.applicationDate" type="date">
        </p>
        <table border="1">
            <thead>
                <tr>
                    <th>审批人</th>
                    <th>签名</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>部门主管</td>
                    <td><input v-model="formData.departmentSupervisorSignature" type="text"></td>
                </tr>
                <tr>
                    <td>部门经理</td>
                    <td><input v-model="formData.departmentManagerSignature" type="text"></td>
                </tr>
                <tr>
                    <td>总裁/董事长</td>
                    <td><input v-model="formData.presidentSignature" type="text"></td>
                </tr>
                <tr>
                    <td>部长/总监</td>
                    <td><input v-model="formData.departmentDirectorSignature" type="text"></td>
                </tr>
                <tr>
                    <td>总经理</td>
                    <td><input v-model="formData.generalManagerSignature" type="text"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                name: '',
                employeeId: '',
                gender: '',
                department: '',
                jobType: '',
                idCard: '',
                managementFee: '',
                applicant: '',
                applicationDate: '',
                departmentSupervisorSignature: '',
                departmentManagerSignature: '',
                presidentSignature: '',
                departmentDirectorSignature: '',
                generalManagerSignature: ''
            }
        };
    }
};
</script>

<style scoped>
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
</style>